<template>
  <div class="app">
    <myNavbar title="邀请有礼"></myNavbar>
    <div class="rule-dio">
      <div class="rule-title">
        <div class="botton_Bg_Color" style="width:50px;height:4px;margin-right:20px;border-radius:30px"></div>
        <text style="font-size: 26px" class="botton_bd_fz_color">规则内容</text>
        <div class="botton_Bg_Color" style="width:50px;height:4px;margin-left:20px;border-radius:30px"></div>
      </div>
      <div class="rule-text">
        <text style="font-size: 24px">1、邀请好友购买【商城】产品获得红包奖励</text>
      </div>
      <div class="rule-text">
        <text style="font-size: 24px">2、1红包等于1元 、全场通用 、不限额使用</text>
      </div>
      <div class="rule-codeImg">
        <image class="rule-codeImg_content" :src="qrCode"></image>
      </div>

<!--      <div class="rule-click botton_Bg_Color"  @click="forwardClick" v-if="model=='android'">-->
<!--        <text class="rule-click-title">邀请好友成为会员</text>-->
<!--      </div>-->
      <div class="rule-click botton_Bg_Color"   v-if="model!='android'">
         <div class="title-button" v-if="model!='android'">请用微信扫一扫</div>
      </div>
        <div class="botton-deposit">
    <div class="botton-deposit-botton-content">
      <div class="button-content"   @click="toBucket">
        <div class="button">
          <image src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/10200/upload/20210903/invitation.png" style="height:40px;width:40px;"></image>
        </div>
        <div class="title-button">我邀请的会员</div>
      </div>
      <div class="button-content" @click="toWithdrawal">
        <div class="button">
          <image src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/10200/upload/20210903/history.png" style="height:40px;width:40px;"></image>
        </div>
        <div class="title-button">我的推广订单</div>
      </div>

    </div>
  </div>
    </div>
  </div>
</template>
<script>
const deviceInfo = app.requireModule("eeui/deviceInfo");
import myNavbar from "../../../components/myNavbar/myNavbar.vue";
import { createQrcode } from '../../../api/member'
export default {
  data() {
    return {
      model: WXEnvironment.platform,
      homeInfo: {},
      pageNum: 1,
      avatar: '',
      pageSize: 1000,
      isRuleShow: false,
      dialogShow: false,
      memberInfo: {},
      canvasType: false,
      canvasHeight: 400,
      canvasH: 0,
      qrCode: '',
      carvasQrCode: '',
      carvasLogo: '',
      cardInfo: {
        TagText: "****", //标签
        Name: '****', //姓名
        avater: "", //需要https图片路径
        qrCode: "", //需要https图片路径
        price: '**',
        logo: 'http://cdnx.rzico.com/images/canvasMyLogo.png',
        coupons: '',
        marketPrice: '',
        activityPrice: ''
      },
      oneButton: [{
        text: '确定'
      }],
      showOneButtonDialog: false,
    }
  },
  components: {myNavbar},
  created(){
    this.loadCreateQrcode()
  },
  methods:{

    toWithdrawal(){
           eeui.openPage({
            url: 'root://pages/member/share/popularize',
            statusBarType: 'immersion',
            statusBarStyle:false,
        })
    },
    toBucket(){
       eeui.openPage({
            url: 'root://pages/member/share/myInvitation',
            statusBarType: 'immersion',
            statusBarStyle:false,
        })
    },
    forwardClick(){
      var _this = this
      const umengShare = app.requireModule("eeui/umengShare");
      var shareContent = {
        title:_this.shareData.title,
        url:_this.shareData.url+'/q/#/?code='+ _this.getGlobalData().userInfo.username.substring(10),
        thumb:_this.shareData.thumb,
        description:_this.shareData.description
      }
         umengShare.webShare(shareContent,callback=>{
        console.log(callback)
      })
    },
    loadCreateQrcode(){
      if (this.getGlobalData().token == null) {
        return;
      }
//      createQrcode().then(res => {
        this.qrCode = this.globalData.APP_BASE_API + '/zxing/createImage?mchId=' + this.getGlobalData().mchId + '&data=' + encodeURIComponent(this.shareData.url+'/q/#/?code='+ this.getGlobalData().userInfo.username.substring(10))
//        console.log(this.qrCode)
//      }).catch(error => {
//
//      })
    }
  }
}
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
.app {
  background-color: rgba(248, 248, 248, 1);
}

.rule-dio {
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: center;
  width: 690px;
  background-color: white;
  border-radius: 16px;
  margin-left: 30px;
  margin-top: 50px;
  box-sizing: border-box;
}

.rule-text {
  width: 600px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 26px;
  padding-top: 20px;
  color: rgba(0, 0, 0, 0.4);
}

.rule-click {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  height: 80px;
  width: 600px;
  color: white;
  border-radius: 14px;
}

.rule-title {
  width: 650px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color:rgba(0, 0, 0, 0.1) ;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
  font-size: 40px;
  margin-bottom: 20px;
}

.rule-click-title{
  font-size: 26px;
  color: white;
}

.rule-codeImg{
  width: 650px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.rule-codeImg_content{
  width: 400px;
  height: 400px;
  background-color: #d9dde1;
}

.botton-deposit {
  background-color: white;
  padding: 20rpx;
  width: 690px;
  box-sizing: border-box;
  margin-left: 30px;
  margin-top: 50px;
  border-radius: 12px;
}
.botton-deposit-botton-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

.botton-deposit-title-content {
  height: 40px;
  width: 143px;
  display: flex;
  justify-content: space-between;
}
.button-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin-top: 40rpx; */
  width: 200px;

}
.button {
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f7dec5;
  /* background: linear-gradient(to right, #f7dec5, #f0d0a7); */
}
.title-button {
  margin-top: 10px;
  font-size: 24px;

}


</style>
